<template>
    <div>
        <!-- 左侧图片 -->
        <div style="width: 70%; min-height: 200px; float: left; padding: 10px;margin-right: 50px; padding: 10px">
            <h4 style="margin-left: 10px">销售额排行</h4>
            <!-- 柱状统计图部分 -->
            <div id="rank1" style="width: 700px; height: 300px;">

            </div>
        </div>
        <!-- 右侧排行榜 -->
        <div style="width: 20%; min-height: 250px;float: left; padding: 10px;">
            <h4 style="margin-bottom: 20px">门店销售排行榜</h4>
            <ul>
                <li>
                    <span class="point" style="margin-bottom: 15px">1</span>
                    <span style="margin-right: 8px">白鹭岛1号店</span>
                    <span>1234.56</span>
                </li>
                <li>
                    <span class="point" style="margin-bottom: 15px">2</span>
                    <span style="margin-right: 8px">白鹭岛2号店</span>
                    <span>1134.56</span>
                </li>
                <li>
                    <span class="point" style="margin-bottom: 15px">3</span>
                    <span style="margin-right: 8px">白鹭岛3号店</span>
                    <span>1034.56</span>
                </li>
                <li>
                    <span class="point" style="margin-bottom: 15px">4</span>
                    <span style="margin-right: 8px">白鹭岛4号店</span>
                    <span>934.56</span>
                </li>
                <li>
                    <span class="point" style="margin-bottom: 15px">5</span>
                    <span style="margin-right: 8px">白鹭岛5号店</span>
                    <span>834.56</span>
                </li>
                <li>
                    <span class="point" style="margin-bottom: 15px">6</span>
                    <span style="margin-right: 8px">白鹭岛6号店</span>
                    <span>734.56</span>
                </li>
                <li>
                    <span class="point" style="margin-bottom: 15px;">7</span>
                    <span style="margin-right: 8px">白鹭岛7号店</span>
                    <span>634.56</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'InfoView',
    data() {
        return {

        }
    },
    mounted() {
        this.tab()
    },
    methods: {
        tab() {
            var chartDom = document.getElementById('rank1');
            var myChart = echarts.init(chartDom);
            myChart.setOption({
                xAxis: {
                    type: 'category',
                    data: [
                        '1月',
                        '2月',
                        '3月',
                        '4月',
                        '5月',
                        '6月',
                        '7月',
                        '8月',
                        '9月',
                        '10月',
                        '11月',
                        '12月'
                    ]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [230, 210, 750, 850, 600, 710, 530, 630, 450, 600, 233, 400],
                        type: 'bar',
                        showBackground: false,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            })
        }
    }
}
</script>